<template>
	<view class="container">
		<textarea placeholder="这一刻的想法..." :auto-height="true" maxlength="-1" v-model="form.content"
			class="post-txt"></textarea>
		<!-- 上传图片 -->
		<q-alioss-upload v-if="form.type == 1" ref="ossUpload" @success="onSubmit"></q-alioss-upload>
		<!-- 上传视频 -->
		<q-alioss-upload v-if="form.type == 2" accept='video' :maxCount="1" ref="ossUpload" @success="onSubmit">
		</q-alioss-upload>
		<!-- 选择圈子 -->
		<navigator v-if="isTopic" url="/pages/choose-topic/choose-topic" class="choose-item">
			<image class="icon" src="/static/p_1.png"></image>
			<text class="txt">{{ topicName }}</text>
			<view style="margin-left: auto;">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</navigator>
		<!-- 选择话题 -->
		<navigator v-if="!isTopic" :url="'/pages/choose-discuss/choose-discuss?topic_id=' + form.topic_id"
			class="choose-item">
			<image class="icon" src="/static/m_1.png"></image>
			<text class="txt">{{ disName }}</text>
			<view style="margin-left: auto;">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</navigator>
		<!-- 所在位置 -->
		<view @click="chooseLocation" class="choose-item">
			<u-icon class="add-icon" name="map" color="#999" :size="20"></u-icon>
			<text class="txt">{{ form.address || '所在位置' }}</text>
			<view style="margin-left: auto;">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="submit-btn">
			<q-button @click="onUpload">发布</q-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mediaList: [],
				topicName: '选择圈子',
				disName: '选择话题',
				form: {
					title: '',
					type: 1,
					topic_id: '',
					discuss_id: '',
					content: '',
					media: [],
					longitude: 0,
					latitude: 0,
					address: ''
				},
				isTopic: true
			};
		},
		onLoad(options) {
			this.form.type = options.type;

			if (options.is_topic) {
				this.isTopic = options.is_topic;
			}

			if (options.topic_id) {
				this.form.topic_id = options.topic_id;
				this.isTopic = false;
			}
			if (options.discuss_id) {
				this.form.discuss_id = options.discuss_id;
				this.disName = options.dis_name;
			}

			let location = uni.getStorageSync('location_info');
			this.form.longitude = location.longitude;
			this.form.latitude = location.latitude;
		},
		methods: {
			onSubmit(e) {
				let fileList = [];
				e.forEach(item => {
					fileList.push(item.url)
				})

				this.form.media = fileList;

				this.$H.post('post/release', this.form).then(res => {
					if (res.code == 200) {
						uni.redirectTo({
							url: '/pages/post/detail?id=' + res.result.id
						});

						this.$H.post('post/checkPostImg', {
							post_id: res.result.id
						});
					}
					uni.hideLoading();
				});
			},
			onUpload() {
				if (!this.form.content) {
					this.$u.toast('内容不能为空');
					return;
				}

				if (!this.form.topic_id) {
					this.$u.toast('请选择圈子');
					return;
				}
				this.$refs.ossUpload.upload();

				uni.showLoading({
					mask: true,
					title: '发布中'
				});
			},
			chooseLocation() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
						that.form.address = res.name;
						that.form.latitude = res.latitude;
						that.form.longitude = res.longitude;
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.post-txt {
		width: 100%;
		padding: 20rpx 0;
		min-height: 300rpx;
	}

	.choose-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1px solid #f5f5f5;

		&:last-child {
			border: 0;
		}

		.txt {
			margin-left: 20rpx;
		}

		.icon {
			width: 40rpx;
			height: 40rpx;
		}

		.icon-right {
			margin-left: 0;
		}
	}

	.submit-btn {
		margin-top: 50rpx;
	}
</style>
